

<template>
  <div>
    <h2>Parent - Parent - 父组件 </h2>
    <h2 @click="changeNum" >num --- {{ num }}</h2>
    <button @click="changeChild">ref 去修改子组件 one   </button>
    <h2>msg = {{ msg }}</h2>
    <hr>
    <ChildOne ref="one" :num="num" ></ChildOne>
    <hr>
    <child-two ref="two" @changemsg="changeMsg" :change="change" ></child-two>

    <List>
        <div>
          <h2>Hello Wh2309 </h2>
          <h2>Hello Html5</h2>
        </div>
        <template #left>
            <div>
              <h2>List - 1 - 1 </h2>
              <h2>List - 1 - 1 </h2>
              <h2>List - 1 - 1 </h2>
              <h2>List - 1 - 1 </h2>
              <h2>List - 1 - 1 </h2>
              <h2>List - 1 - 1 </h2>
            </div>
        </template>
        <template #right>
            <div>
              <h2>List - 2 - 2 </h2>
              <h2>List - 2 - 2 </h2>
              <h2>List - 2 - 2 </h2>
              <h2>List - 2 - 2 </h2>
              <h2>List - 2 - 2 </h2>
              <h2>List - 2 - 2 </h2>
            </div>
        </template>

        <template #data="scope">
          <h2>word == {{ scope.info.word  }}</h2>
          <h2>age == {{ scope.info.age  }}</h2>
        </template>
    </List>
    <h2>msg == {{ msg }}</h2>
    <MyInp v-model="msg" ></MyInp>
  </div>
</template>

<script>
import ChildOne from './ChildOne.vue'
import ChildTwo from './ChildTwo.vue'
import List from './List.vue'

export default {
  data(){
    return {
      num:999,
      msg:"2309 - yyds "
    }
  },
  provide:{
    test:"TEst- test -test",
    obj:{
      word:"Are YOU OK"
    }
  },
  methods:{
    changeMsg(msg){
      this.msg = msg;
      this.num++;
    },
    changeNum(){
      this.num++;
    },
    changeChild(){
      this.$refs.one.count+=100;
      this.$refs.one.changeShow()
    },
    change(n){
      this.num+=n;
    }
  },
  components:{
    ChildOne,
    ChildTwo,
    List
  }
}
</script>
